import { SetupContext, defineComponent } from 'vue'
import { useNamespace } from '../shared/hooks/useNamespace'
import { accordionElements } from './accordion-elements'
import { AccordionEmit, AccordionProps, accordionProps } from './accordion-types'
import useAccordion from './hooks/use-accordion'

export default defineComponent({
  name: 'FsAccordion',
  props: accordionProps,
  setup(props: AccordionProps, ctx: SetupContext<AccordionEmit>) {
    const { data, width, height, clickHandle } = useAccordion(props, ctx)
    const ns = useNamespace('accordion')
    return () => {
      return (
        <div class={[ns.b()]}>
          {data.value.map((item) => {
            return accordionElements(ns, item, data.value, clickHandle)
          })}
        </div>
      )
    }
  }
})
